<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
    <title>{{roomID}}</title>

    <style>
        * {
            font-family: "微软雅黑";
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #content {
            min-height: 100%;
            position: absolute;
            height: 100%;
            z-index: 0;
        }

        .content {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #f6f6f6;
        }

        .chatArea {
            width: 100%;
            height: 100%;
            background-color: #f6f6f6;
        }

        .txtArea {
            width: 100%;
            height: 80%;
            overflow-y: auto;
            background-color: #f6f6f6;
            position: absolute;
        }

        .sendArea {
            width: 100%;
            /*height: 10%;*/
            position: absolute;
            bottom: 0px;
        }

        #sendMessage {
            width: 100%;
            height: 100%;
        }

        .username-msg {
            font-weight: bolder;
        }

        .data_msg {
            margin-left: 5%;
            background-color: #e0e3e6;
            border-radius: 8px;
            padding: 3px;
        }

        .msg {
            width: 100%;
            height: 2em;
            font-size: 2em;
        }

        .sysMsg {
            color: #c1bfbf;
            padding-right: 5px;
            padding-left: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<!--房间: {{roomID}} <br/>-->
<!--<button id="joinOrLeave">退出聊天室</button>-->
<div class="content" id="content">
    <div class="chatArea well">
        <div class="txtArea" id="txtarea"></div>
        <div class="sendArea">
            <table style="width: 100%">
                <tr>
                    <td width="70%" id="chat_input">
                        <input id="messageInput" class="msg" type="text" placeholder="发送内容..." maxlength="200"/></td>
                    <td width="15%" style="text-align: center;" id="hand_operation">
                        <button id="ishandup" onclick="ishandup(1)" class="weui_btn weui_btn_primary send">举手</button>
                    </td>
                    <td width="15%" style="text-align: center;" id="send_button">
                        <button id="sendMessage" class="weui_btn weui_btn_primary send">发送</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/common.js"></script>
<script>

    var socket;
    var userName = '';
    var userId, isfrom;
    $(function () {
        // ----------设置昵称-------------
        //isfrom a :android/i:ios/wc:微信/w:网页

        //处理url参数
        function GetUrlPara() {
            var url = document.location.toString();
            var arrUrl = url.split("/");
            var roomId = arrUrl[arrUrl.length - 1];
            isfrom = arrUrl[arrUrl.length - 2];
            userName = arrUrl[arrUrl.length - 3];
            userId = arrUrl[arrUrl.length - 4];
            userName = decodeURI(userName)

            console.log('url=' + url)
            console.log(arrUrl)
            console.log('学生：' + userName + '，id=' + userId + '  进入聊天室：' + roomId)
        }

        // ---------创建连接-----------
        socket = io();

        GetUrlPara()

        //默认元素具有举手功能，暂停只有pad端登录才有
        if (isfrom != 'p') {
            $("#hand_operation").remove()
            $("#chat_input").width('80%')
            $('#send_button').width('20%')
        }

        // 加入聊天室
        socket.on('connect', function () {
            var data = {
                userName: userName,
                userId: userId,
                isfrom: isfrom
            }
            socket.emit('join', data);
        });

        // 监听消息
        socket.on('msg', function (user, msg) {
            var message = '' +
                    '<div class="message">' +
                    ' <div> <span class="username-msg">' + user.name + getdata() + ' </span></div>' +
                    '  <span class="data_msg">' + msg + '</span>' +
                    '</div>';
            $('#txtarea').append(message);
            // 滚动条保持最下方
            $('#txtarea').scrollTop($('#txtarea')[0].scrollHeight);
        });

        // 禁言中
        socket.on('shutup', function (msg) {
            $('#messageInput').attr('disabled', 'disabled')
            $('#messageInput').attr('placeholder', '禁言中')
        });

        // 解除禁言
        socket.on('talk', function (msg) {
            $('#messageInput').removeAttr('disabled')
            $('#messageInput').attr('placeholder', '请输入聊天内容。。。')
        });

        // 监听系统消息
        socket.on('sys', function (sysMsg, users) {
            //消息不为空的时间显示到聊天页面
            if (sysMsg != '' || sysMsg.length != 0) {
                var message = '<div class="sysMsg">' + sysMsg + '</div>';
                $('#txtarea').append(message);
            }
        });

        // 老师让学生发言
        socket.on('connect_stu', function (stu_id) {
            //如果是被叫发言是本人只需要发送连接
            if (userId == stu_id) {
                callAndroid(1, userId)
                var jsonObj = {
                    userId: userId,
                    name: userName,
                    connect_status: 1
                }
                socket.emit('connectingU', jsonObj)
            }
        });

        // 老师让学生关闭发言
        socket.on('disconnect_stu', function (stu_id) {
            if (stu_id == -1) {
                callAndroid(0, userId)
            } else {
                //如果是被叫发言是本人只需要发送连接
                if (userId == stu_id) {
                    callAndroid(0, userId)
                    var jsonObj = {
                        userId: userId,
                        name: userName,
                        connect_status: 0
                    }
                    socket.emit('connectingU', jsonObj)
                }
            }
        });

        // 老师反馈给学生是否收到举手或取消举手事件
        socket.on('handup_back', function (data) {
            if (userId == data.userId) {
                if (data.ishandup == 1) {
                    $('#ishandup').text('放手');
                    $('#ishandup').attr("class", "weui_btn weui_btn_warn send")
                } else if (data.ishandup == 0) {
                    $('#ishandup').text('举手');
                    $('#ishandup').attr("class", "weui_btn weui_btn_primary send")
                }
            }
        });
        // 老师取消所有学生举手事件
        socket.on('put_down_all_hand', function (data) {
            if (isfrom == 'p') {
                $('#ishandup').text('举手');
                $('#ishandup').attr("class", "weui_btn weui_btn_primary send")
            }
        });


        // 发送消息
        $('#messageInput').keydown(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                var msg = $(this).val();
                if (msg.trim() == '') {
                    return false
                }
                $(this).val('');
                socket.send(msg);
            }
        });

        $('#sendMessage').click(function () {
            var msg = $('#messageInput').val();
            if (msg.trim() == '') {
                return false
            }
            $('#messageInput').val('');
            socket.send(msg);
        })

        // 退出聊天室
        $('#joinOrLeave').click(function () {
            if ($(this).text() === '退出聊天室') {
                $(this).text('进入聊天室');
                socket.emit('leave');
                var msg = '你已经退出了聊天室,重新发言请点击"进入聊天室"';
                $('#txtarea').append('<div class="sysMsg">' + msg + '</div>');
            } else {
                $(this).text('退出聊天室');
                socket.emit('join', userName);
            }
        });
    });

    $("#ishandup").click(function () {
        if ($(this).text() === '举手') {
            ishandup(1)
        } else {
            ishandup(0)
        }
    })

    function getdata() {
        var date = new Date();
        var year = date.getFullYear(); //获取当前年份
        var mon = date.getMonth() + 1; //获取当前月份
        var da = date.getDate(); //获取当前日
        var day = date.getDay(); //获取当前星期几
        var h = date.getHours(); //获取小时
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //获取分钟
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //获取秒

        return '<span class="sysMsg"> ' + mon + '-' + da + ' ' + h + ':' + m + ':' + s + '</span>';
    }

    /**
     * 根据参数判断学生是否举手并发送事件
     * param: 1代表举手，0代表放手
     */
    function ishandup(param) {
        var jsonObj = {
            userId: userId,
            name: userName,
            ishandup: param
        }
        socket.emit("ishandup", jsonObj)
    }

</script>
</body>
</html>